


html guide

by Anonymous



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Guide, HTML guide - Freeform, How-to
Language: English
Status: Completed
Published: 2020-04-13
Updated: 2020-04-15
Packaged: 2021-03-02 05:33:43
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 3
Words: 2,570
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/23619817
Author URL: https://archiveofourown.org/
Summary: just html things that i've learnt/know. chap 1 is pretty easy, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.kind of redundant i guess? you could probably get a lot more information from other people who know more about this than me. ig this is mostly just for myself :]
Comments: 6
Kudos: 23
Collections: Anonymous





	1. basic html things

**Author's Note:**

  * Inspired by [More Complicated Formatting](https://archiveofourown.org/works/15078095) by [Okumatte](https://archiveofourown.org/users/Okumatte/pseuds/Okumatte). 
  * Inspired by [Personal Experiment with HTML and CSS](https://archiveofourown.org/works/15685086) by [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind). 
  * Inspired by [How to Make Linked Footnotes on AO3](https://archiveofourown.org/works/4579026) by [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 

**Summary for the Chapter:**

> **replace all parentheses with < or > so the html works!!** these parentheses ( become these < and these parentheses ) become >
> 
> haha i did not know how to show formatting :(

##  general stuff

  * to start a paragraph/line of text, use (p)
  * bold text: use (strong) or (b)
  * italicized text: use (em) or (i)
  * underlined text: use (ins) or (u)
  * strikethrough: use (strike) or (del)
  * superscript: use (sup)
  * subscript: use (sub)
  * big text: use (big)
  * small text: use (small)
  * close all these tags with a slash and the same tag that you used to start it with
  * don't put any spaces between a bold/italics/underline/etc. tag and the content or the closing tag.



**examples:**

(p)here is my paragraph. to close it i use this(/p)

here is a (strong)bolded(/strong) word and here is (b)another(/b).

an (i)italicized(/i) word and (em)another one(/em)

now for some (del)deleted text(/del) and (strike)a different variation(/strike)

a (sup)superscript(/sup) word and a (sub)subscript(/sub) word.

(big)some big words(/big) and a (small)small(/small) one.

**how it looks in html:**

here is my paragraph. to close it i use this

here is a **bolded** word and here is **another**.

an _italicized_ word and _another one_

now for some ~~deleted text~~ and ~~a different variation~~

a superscript word and a subscript word.

some big words and a small one.

  


##  aligning text

  * (p) automatically aligns text to to the left.
  * use (p align="center") to have a paragraph in the center
  * use (p align="right") to have a paragraph aligned to the right
  * use (p align="justify") to have a text-justified paragraph.
  * to close these tags, simply use (/p)
  * you can use these "align" codes with pretty much everything else
  * for example, all the headers i have are in the style (h2), but it isn't automatically centered, so i write it as (h2 align="center")
  * just make sure you put the equals sign and quotes so it works
  * if you use something like google docs to write and change the font, remember that the **straight** quote mark is required for html on ao3, i.e. this thing: ". if you use a curved or slanted version of that in your html, it will not work!!



**example:**

(p)text on the left.(/p)

(p align="center")text in the center.(/p)

(p align="right")text on the right.(/p)

(p align="justify") text justified. for this one, you will need more text so you can see how it works, so here's some lipsum: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.(/p)

**how it looks in html:**

text on the left.

text in the center.

text on the right.

text justified. for this one, you will need more text so you can see how it works, so here's some lipsum: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  


##  headers

  * there are six headers on ao3 that you can use
  * (h1), (h2), (h3), (h4), (h5), and (h6)
  * to use these, simply put the number you want after the "h" (no spaces) and write your text
  * close the tag with a "/"



**example: ******

(h1)this is header 1(/h1)

(h2)this is header 2(/h2)

(h3)this is header 3(/h3)

(h4)this is header 4(/h4)

(h5)this is header 5(/h5)

(h6)this is header 6(/h6)

**how it looks in html:**

# this is header 1

## this is header 2

### this is header 3

#### this is header 4

##### this is header 5

###### this is header 6

  


##  lines and breaks

  * to make a short line in the center of text, use (p)text(/p)(hr /)(p)more text(/p)
  * to make a break in text (w/o any lines) use (br /)
  * to have a space between paragraphs (like for a scene change), use (p)(br /)(/p) to make a gap. at least, that's what i do



**examples:**

**example 1:** some text here blah blah blah(/p) (hr /) (p)and more text here blah blah blah.

**example 2:** again, more text yada yada yada whatever(br /)and a line break there.

**example 3:** (p)and for the gap one, here's some more text. end paragraph 1 here.(/p) (p)(br /)(/p) (p)still example 3. you can see there's a much bigger space here. that empty paragraph has the line break in it.(/p)

**how it looks in html:**

**example 1:** some text here blah blah blah

* * *

and more text here blah blah blah.

**example 2:** again, more text yada yada yada whatever  
and a line break there.

**example 3:** and for the gap one, here's some text. end paragraph 1 here.

  


still example 3. you can see there's a much bigger space here. that empty paragraph has the line break in it.

  


##  unordered lists

  * this is what i've been using to describe code in this work so far :)
  * to start, put this (ul) in your text, which means "unordered list." you don't need any other tags with it.
  * each new bullet point is written as (li) for "list item" and closed as (/li)
  * close the list with (/ul)



**example:**

(ul)  
(li)some text here(/li)  
(li)and more text(/li)  
(li)teeeexxxttttt(/li)  
(/ul)

**how it looks in html:**

  * some text here
  * and more text
  * teeeexxxttttt



  


##  ordered lists

  * ordered list are written the same way as unordered lists, but with "ol" instead of "ul"
  * text shows up with numbered bullets



**example:**

(ol)  
(li)first thing(/li)  
(li)second thing(/li)  
(li)third thing(/li)  
(/ol)

**how it looks in html:**

  1. first thing
  2. second thing
  3. third thing



  


##  other text elements

  * to make a lil' indent, use (dd) and close it with (/dd). "dd" means "definition description", so you use this for a definition. personally i like the next version better.
  * to make an indented block of text with a lil' line in front, use (blockquote) and close it with (/blockquote). for this one you do need to have a paragraph tag nestled between the blockquote.
  * typewriter font: use (tt), (pre), (code), (kbd), (samp), or (var), and close with the a slash like this: (/tt), (/pre), etc.



**example:**

(dd)some text here(/dd)

(blockquote)(p)and more text here(/p)(/blockquote)

(tt)now this style of text(/tt)

(pre)same style(/pre)

(code)again, same font(/code)

(kbd)another version(/kbd)

(samp)almost done(/samp)

(var)last one(/var)

**how it looks in html:**

    some text here

> and more text here

`now this style of text`
    
    
    same style

`again, same font`

`another version`

almost done

last one


	2. basic html things

**Summary for the Chapter:**

> ok so if anyone saw this before may 17 u probably saw it as a repeat of the first chapter (a bug) so its rewritten now (to be what it should be). i think i got everything that was here.

##  external links

  * for an external link (to another webpage), use (a href="link url")text(/a) 
  * (a href) means "anchor hypertext reference" 
  * put your link url within the quote marks 
  * the text is what is shown (what you click to go to the page) 



**example**

hope you're finding this helpful! now (a href="https://archiveofourown.org/users/safvendorf")my dashboard(/a).

**in html:**

hope you're finding this helpful! now [my dashboard](https://m.youtube.com/watch?v=dQw4w9WgXcQ).

  


##  footnotes

footnotes need a lil more work. there are four parts involved: a link _from_ the main text, a connecting anchor in the footnotes, a link _back_ to the main text, and the receiving anchor in the main text. in these examples i will **not** show any (sup) tags or brackets but you should definitely use them (and i will be using them in the "how it should look" section). 

**from text, to footnotes**

  * the html: (a href="#fn1.ch2" title="click to footnote")1(/a) 
  * make sure you put the hashtag there! 
  * i THINK the title is not necessary, but im not sure. the title is what you see when you hover over it on a laptop 



**anchor in footnotes**

  * now, in your footnotes box (yes, click the lil check mark for chapter notes at the end), put this in for the receiving anchor: (a name="fn.1ch2" id="fn1.ch2")(/a) 
  * since it is an anchor link, you don't need any text between (a name...) and (/a). think of it as a drop off point. 
  * again, the names and ids must correspond, otherwise it doesn't work. 



**from footnotes, to text**

  * to link back up we're going to do the first pretty much. use this at the end of your footnote: (a href="#backfn1.ch2" title="click to return")return to text(/a) 
  * pretty self explanatory, same as the link to footnotes 



**anchor in text**

  * anchor in text is same as anchor in footnotes: (a name="backfn1.ch2" id="backfn1.ch2")(/a) 
  * again, no text is necessary between (a name...) and (/a) 

**other things**

    * from what i understand, the href tag is connected to the id tag, so related notes must have the same names. 
    * personally i put the main text anchor at the start of the paragraph, so when the reader clicks "return to text" the text isn't cut off. obvs they can scroll up but that's dumb right 
    * all notes must be named different things (that's why i was using "fn1.ch2") you can name them anything, ex. "note1", "note4.2", hell even "twinks". yeah i tried it. 

**example of text (first is anchor, second is link)**

(a name="backfn1" id="backfn1")(/a)blah blah blah text yada yada yada advskhfhkdfkhsfkhsfj ok now here's something you might not know about and boom you author is kind enough to give you a footnote!(a href="#fn1" title="click ittttt")1(/a). 

**example of footnotes (first is anchor, second is link)**

(a name="fn1" id="fn1")(/a)and now an explanation here(a href="#backfn1" title="click meeee")return to text(/a) 

**how it really looks**

blah blah blah text yada yada yada advskhfhkdfkhsfkhsfj ok now here's something you might not know about and boom you author is kind enough to give you a footnote![1]

  


##  jumps in text

    * ever read a fic where the author was like "skip x section b/c of these triggers" but you forgot which section it was? yeah, this is for that. 
    * a lot like footnotes, but much easier. for the skip in text, use the same html as before: (a href="#jump1.ch2" title="skip text")skip(/a) 
    * when it's safe to read again, use this: (a name="jump1.ch2" id="jump1.ch2")(/a) 
    * if you want you can put a symbol for a visual end after the anchor like so: (a name...)(/a)(sup)*(/sup)m so the reader will know where they've been dropped off at (since it's invisible) 
    * again, i will **not** show (sup) tags or brackets in the example (it gets confusing)

**example**

la la la text story good stuff here blah blah blah and oh no triggers upcoming(a href="#jump1" title="skip triggers")skip(/a) now some line breaks for good measure (a name="jump1" id="jump1")(/a)aaand now you can come back! 

**how it looks**

la la la text story good stuff here blah blah blah and oh no triggers upcoming[skip]now some line breaks for good measure  
  
  
  
  
  
aaand now you can come back! 




  


##  images

  * ao3 doesn't host images, so you need an external site like imgur or flickr to host from. i use imgur to host. here's how i get a url: post a private picture, favorite it, go to any imgur post, go to comment on it, click the heart, select your photo, and boom it you got a link.
  * code: (img src="url" alt="description" width="100%" /) 
  * "img src" means image source, so you need a direct link to go to the picture. 
  * "alt" is the alternate text that shows if the picture cannot be reached (like it was deleted). 
  * "width" is how wide it is on any given screen. percent is super helpful for this because not matter the screen size, the image will always be 100% of it, of 75%, or 50%, whatever. 
  * yes, you need a space and slash at the end, same as you would a line break (br /), since there is no closing tag 



**example**

(img src="https://i.imgur.com/loTwLRj.jpg" alt="orange tabby cat" width="75%" /)

**how it looks**

**Notes for the Chapter:**

> and now an explanation here [return to text]


	3. table of contents

**Summary for the Chapter:**

> this is SPECIFICALLY for table of contents. i gave this one its own page because it is very confusing for me personally to see all the html formatting while editing. i hope you all understand it easily.
> 
> literally all of this is from [La_Temperana](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza)'s [How to Make Linked Footnotes on AO3](https://archiveofourown.org/works/4579026/chapters/10429149), specifically [Chapter 3 with the creator's style off](https://archiveofourown.org/works/4579026/chapters/25357182?style=disable)

##  table of contents

this is for linking a reader to the SAME PAGE. not different pages. 

things i **will NOT show in the example** : (sup) tags, (small) tags, [brackets]. these **WILL** be in the "how it should look" version. other than that, the only thing i'm changing is the parentheses. 

## in the TOC:

* first you need the main "return to top" anchor. written like this: (a name="navreturn1" id="navreturn1"). write your title after the anchor, ex.: (anchor)(/a)Table of Contents

* before each chapter name, put this in: (a href="#nav1.1") and close with (/a). do this for each chapter name and change the numbers (ex nav2.4, nav5.1)

## in the main text:

* now in the actual text, put this anchor before your first drop off point: (a name="nav1.1" id="nav1.1")(/a)chapter title and text

* for the "return to TOC" link, use this: (a href="#navreturn1")return to top(/a)

## EXAMPLE OF TABLE OF CONTENTS 

(a name="navreturn1" id="navreturn1")(/a)Part One

(a href="#nav1.1")chapter 1(/a)  
(a href="#nav1.2")chapter 2(/a)

(a name="navreturn2" id="navreturn2")(/a)Part Two

(a href="#nav2.1")chapter 1(/a)  
(a href="#nav2.2")chapter 2(/a)

## EXAMPLE OF MAIN TEXT

**Part One**

(a name="nav1.1" id="nav1.1")(/a)Chapter 1: 

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (a href="#navreturn1")return to top(/a)

(a name="nav1.2" id="nav1.2")(/a)Chapter 2:

> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. (a href="#navreturn1")return to top(/a)

**Part Two**

(a name="nav2.1" id="nav2.1")(/a)Chapter 1:

> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. (a href="#navreturn2")return to top(/a)

(a name="nav2.2" id="nav2.2")(/a)Chapter 2:

> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (a href="#navreturn2")return to top(/a)

## HOW THE TABLE OF CONTENTS LOOK IN HTML

Part One

chapter 1  
chapter 2

Part Two

chapter 1  
chapter 2

## HOW THE TEXT SHOULD LOOK IN HTML

**Part One**

Chapter 1: 

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [return to top]

Chapter 2:

> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [return to top]

**Part Two**

Chapter 1:

> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [return to top]

Chapter 2:

> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [return to top]


End file.
